<template>
  <el-dialog
    :title="!dataForm.id ? '新增督导详情' : '修改督导详情'"
    :close-on-click-modal="false"
    :visible.sync="visible" 
    custom-class="el-dialog-star"
     top="3vh"
    >
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
    <el-row>
      <el-col :span="24">
        <div class="title"></div>
      </el-col>
    <el-col :span="12">
    <el-form-item label="客户" prop="contractId">
      <el-select v-model="dataForm.contractId" filterable placeholder="请选择" clearable style="width: 100%;">
          <el-option v-for="item in contracts" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </el-form-item>
    </el-col>
    <el-col :span="12">
    <el-form-item label="督导类型" prop="supervisionType">
      <el-select v-model="dataForm.supervisionType" placeholder="请选择" style="width: 100%;">
          <el-option v-for="item in typeOptions" :key="item.dictionaryCode" :label="item.dictionaryName" :value="item.dictionaryCode"></el-option>
      </el-select>
    </el-form-item>
    </el-col>
    <el-col :span="24">
    <el-form-item label="增加督导人员" prop="userid">
      <el-input-tree-table-ref v-model="dataForm.userid" :title="'人员'" placeholder="请选择" ></el-input-tree-table-ref>
       <!-- <el-select v-model="dataForm.userid" filterable placeholder="请选择" clearable >
          <el-option v-for="item in peoples" :key="item.username" :label="item.username" :value="item.userId"></el-option>
          </el-select> -->
    </el-form-item>
    </el-col>
    
    <el-col :span="12">
    <el-form-item label="开始时间" prop="startTime">
      <el-date-picker v-model="dataForm.startTime" type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
    </el-form-item>
    </el-col>
    <el-col :span="12">
    <el-form-item label="结束时间" prop="endTime">
      <el-date-picker v-model="dataForm.endTime" type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
    </el-form-item>
    </el-col>
    <el-col :span="12">
    <el-form-item label="下次跟进时间" prop="nextTime">
      <el-date-picker v-model="dataForm.nextTime" type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
    </el-form-item>
    </el-col>
    <el-col :span="12">
    <el-form-item label="状态" prop="status">
       <el-select v-model="dataForm.status" placeholder="请选择" style="width: 100%;">
          <el-option label="未完成" :value="0"></el-option>
          <el-option label="已完成" :value="1"></el-option>
       </el-select>
    </el-form-item>
    </el-col>
    <!-- <el-col :span="24">
    <el-form-item label="附件" prop="url">
      <el-input v-model="dataForm.url" placeholder="附件"></el-input>
    </el-form-item>
    </el-col> -->
    <el-col :span="24">
    <el-form-item label="附件">
     <el-upload class="upload-demo" :action="uploadurl" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="10" :on-exceed="handleExceed" :file-list="dataForm.fileList" :on-success="uploadFile" style="width:88%;">
     <el-button size="small" type="primary" >添加附件</el-button>
     </el-upload>
     <a :href= "this.$http.adornUrl(dataForm.url)" download=""  v-if="dataForm.url" title="下载"  mce_href="#">{{dataForm.fileName}}</a>
     </el-form-item>
    </el-col>
    <el-col :span="24">
    <el-form-item label="备注" prop="remark">
      <el-input type="textarea" :rows="3" v-model="dataForm.remark" placeholder="备注"></el-input>
    </el-form-item>
    </el-col>
    </el-row>
    <el-row v-if="!dataForm.id">
          <el-col :span="24">
     <div class="title">接收人</div>
    </el-col>
    <el-col :span="24">
    <!-- <flow-diagram-ref @selected="handlerNodes" :id="dataForm.id" :disabled="false"></flow-diagram-ref> -->
     </el-col>
        </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      uploadurl:"",
      contracts: [],
      typeOptions: [],
      peoples: [],
      dataForm: {
        id: 0,
        contractId: "",
        supervisionType: "",
        userid: "",
        userids: "",
        startTime: "",
        endTime: "",
        nextTime: "",
        url: "",
        status: "",
        remark: "",
        createId: "",
        created: "",
        modifier: "",
        modified: "",
        delVal: "",
        fileList: [],
        fileName:"",
        details: [],
      },
      dataRule: {
        contractId: [
          { required: true, message: "客户不能为空", trigger: "blur" }
        ],
        supervisionType: [
          { required: true, message: "督导类型不能为空", trigger: "blur" }
        ],
        userid: [
          { required: false, message: "督导人员不能为空", trigger: "blur" }
        ],
        startTime: [
          { required: true, message: "开始时间不能为空", trigger: "blur" }
        ],
        endTime: [
          { required: true, message: "结束时间不能为空", trigger: "blur" }
        ],
        nextTime: [
          { required: false, message: "下次跟进时间不能为空", trigger: "blur" }
        ],
        url: [{ required: false, message: "附件不能为空", trigger: "blur" }],
        status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
        remark: [{ required: false, message: "备注不能为空", trigger: "blur" }],
        createId: [
          { required: false, message: "创建人ID不能为空", trigger: "blur" }
        ],
        created: [
          { required: false, message: "创建时间不能为空", trigger: "blur" }
        ],
        modifier: [
          { required: false, message: "修改人ID不能为空", trigger: "blur" }
        ],
        modified: [
          { required: false, message: "最后修改时间不能为空", trigger: "blur" }
        ],
        delVal: [
          {
            required: false,
            message: "删除标示（0--未删除，1--已删除）不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  
  mounted() {

    this.uploadurl = this.$http.adornUrl("/app/upload");
    // this.remoteMethodList();
    // this.contractsMethodList();
    // this.getTypeOptionsList();
  },
  components: {
  },

  methods: {
    init2(id) {
      this.visible = true;
      this.$nextTick(() => {
      this.$refs["dataForm"].resetFields();
      this.dataForm.contractId = id || 0 ;
      });
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.dataForm.fileList= [];
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(
              `/as/supervision/info/${this.dataForm.id}`
            ),
            method: "get",
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.contractId = data.supervision.contractId;
              this.dataForm.supervisionType = data.supervision.supervisionType;
              this.dataForm.userid = data.supervision.userid;
              this.dataForm.userids = data.supervision.userids;
              this.dataForm.startTime = data.supervision.startTime;
              this.dataForm.endTime = data.supervision.endTime;
              this.dataForm.nextTime = data.supervision.nextTime;
              this.dataForm.url = data.supervision.url;
              this.dataForm.status = data.supervision.status;
              this.dataForm.remark = data.supervision.remark;
              this.dataForm.createId = data.supervision.createId;
              this.dataForm.created = data.supervision.created;
              this.dataForm.modifier = data.supervision.modifier;
              this.dataForm.modified = data.supervision.modified;
              this.dataForm.delVal = data.supervision.delVal;
              this.fileName();
            }
          });
        }
      });
    },
    fileName: function(){
        this.$http({
        url: this.$http.adornUrl("/app/name"),
        method: "get",
        params: this.$http.adornParams({
          downUrl: this.dataForm.url
        })
        }).then(({ data }) => {
           this.dataForm.fileName=data.name
                })
            },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/as/supervision/${!this.dataForm.id ? "save" : "update"}`
            ),
            method: "post",
            data: this.$http.adornData({
              id: this.dataForm.id || undefined,
              contractId: this.dataForm.contractId,
              supervisionType: this.dataForm.supervisionType,
              userid: this.dataForm.userid,
              userids: this.dataForm.userids,
              startTime: this.dataForm.startTime,
              endTime: this.dataForm.endTime,
              nextTime: this.dataForm.nextTime,
              url: this.dataForm.url,
              status: this.dataForm.status,
              remark: this.dataForm.remark,
              createId: this.dataForm.createId,
              created: this.dataForm.created,
              modifier: this.dataForm.modifier,
              modified: this.dataForm.modified,
              delVal: this.dataForm.delVal,
              details: this.dataForm.details,
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    remoteMethodList() {
      this.loading = true;
      this.$http({
        url: this.$http.adornUrl("/sys/user/list"),
        method: "get",
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.peoples = data.page.list;
        } else {
          this.peoples = [];
        }
        this.loading = false;
      });
    },
    //获取合同客户
    contractsMethodList() {
      this.loading = true;
      this.$http({
        url: this.$http.adornUrl("/ai/contractinfo/listPage"),
        method: "get",
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.contracts = data.page;
        } else {
          this.contracts = [];
        }
        this.loading = false;
      });
    },
    //客户类型从数据字典中取值
    getTypeOptionsList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/sys/dictionarycode/findDictListByType"),
        method: "get",
        params: this.$http.adornParams({
          type: "supervision_type"
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.typeOptions = data.labels;
        } else {
          this.dataList = [];
        }
        this.dataListLoading = false;
      });
    },

    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },

//上传成功之后的回调
    uploadFile: function(response) {
      if (response.code === 0) {
        this.dataForm.url = response.url;
        console.log(response.msg);
      } else {
        alert(response.msg);
      }
    },

 handlerNodes(details) {
      this.dataForm.details = details
    },
  }
};
</script>

<style scoped>
.title {
  width: 100%;
  height: 32px;
  font-size: 16px;
  color: #17b3a3;
  border-bottom: 1px solid rgba(23, 179, 163, 0.5);
  line-height: 32px;
  margin-bottom: 20px;
}
</style>
<style>
.el-dialog-star {
  min-width: 800px;
}
.el-dialog-star .el-dialog__header {
  background: #f5f7fa;
  padding: 15px 20px;
}
.el-dialog-star .el-dialog__body {
  padding: 10px 20px 20px;
}
</style>


